{% extends 'layout.html' %}

{% block content %}
<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container">
	  <a id="logo-container" href="#" class="brand-logo"><%= scriptAppName %></a>
	<ul class="right hide-on-med-and-down">
	  <li><a href="#">Navbar Link</a></li>
	</ul>

	<ul id="nav-mobile" class="side-nav">
	  <li><a href="#">Navbar Link</a></li>
	</ul>
	<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>

<div class="section no-pad-bot" id="index-banner">
  <div class="container">
      <% if (ngRoute) {
        %><div ng-view></div><%
      } else {
        %><div ng-include="'views/main.html'" ng-controller="MainCtrl"></div><%
      } %>
  </div>
</div>

<div class="container">
  <div class="section">
	<!--   Icon Section   -->
	<div class="row">
	  <div class="col s12 m4">
		<div class="icon-block">
		  <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
		  <h5 class="center">Speeds up development</h5>

		  <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
		</div>
	  </div>

	  <div class="col s12 m4">
		<div class="icon-block">
		  <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
		  <h5 class="center">User Experience Focused</h5>

		  <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
		</div>
	  </div>

	  <div class="col s12 m4">
		<div class="icon-block">
		  <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
		  <h5 class="center">Easy to work with</h5>

		  <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
		</div>
	  </div>
	</div>

  </div>
  <br><br>

  <div class="section">

  </div>
</div>

<footer class="page-footer orange">
  <div class="container">
	<div class="row">
	  <div class="col l6 s12">
		<h5 class="white-text">Company Bio</h5>
		<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>


	  </div>
	  <div class="col l3 s12">
		<h5 class="white-text">Settings</h5>
		<ul>
		  <li><a class="white-text" href="#!">Link 1</a></li>
		  <li><a class="white-text" href="#!">Link 2</a></li>
		  <li><a class="white-text" href="#!">Link 3</a></li>
		  <li><a class="white-text" href="#!">Link 4</a></li>
		</ul>
	  </div>
	  <div class="col l3 s12">
		<h5 class="white-text">Connect</h5>
		<ul>
		  <li><a class="white-text" href="#!">Link 1</a></li>
		  <li><a class="white-text" href="#!">Link 2</a></li>
		  <li><a class="white-text" href="#!">Link 3</a></li>
		  <li><a class="white-text" href="#!">Link 4</a></li>
		</ul>
	  </div>
	</div>
  </div>
  <div class="footer-copyright">
	<div class="container">
	Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
	</div>
  </div>
</footer>
{% endblock %}
